<template>
  <view>
    <view class="addressList">
      <view v-if="addressList.length == 0" class="noList">
        <image :src="vuex_imgPath+'/noaddress.png'" />
        暂无可用的收货地址
      </view>
      <view v-else>
        <view v-for="(item, index) in addressList" :key="index" class="address">
          <view class="address_small">
            <view v-if="type =='order'" :class="item.ship_add_id == shipaddId ? 'radioDefault radioAcitve' : 'radioDefault'" @click="choice(item)">
              <u-icon v-if="item.ship_add_id == shipaddId" name="checkmark" color="#FFFFFF" size="10" />
            </view>
            <view :style="{'width': type == 'order' ? '84%' : '94%'}" @click="type =='order' ? choice(item) : editAdd('edit', item.ship_add_id)">
              <view class="provi">
                <image v-if="item.is_default ==1" :src="vuex_imgPath+'/default.png'" />
                {{ item.cityName }} {{ item.areaName }}
              </view>
              <view class="city">{{ item.detail_address }}</view>
              <view class="name">{{ item.addressPersonList[0].receiverName }} {{ item.addressPersonList[0].mobile }}</view>
            </view>
            <u-icon name="arrow-right" class="defaultStyle" @click="editAdd('edit', item.ship_add_id)" />
          </view>
        </view>
      </view>
      <view class="footerFaker" />
    </view>
    <!-- 底部按钮栏 -->
    <PageFooterBar
      only-btn
      :btn-list="btnList"
      @click="() => { editAdd('add') }"
    />
  </view>
</template>

<script>
import { navigateBackPrePage } from '@/common/common';
import PageFooterBar from '@/components/page-footer-bar'

export default {
  components: { PageFooterBar },

  props: {
    shipaddId: {
      type: [Number, String],
      default: undefined
    },
    addressList: {
      type: [Array, Object],
      default: undefined
    },
    type: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      addressId: '',
      btnList: [{ name: '添加收货地址', isLinearBg: true }]
    }
  },
  methods: {

    choice(item) {
      this.addressId = item.ship_add_id
      const cityParams = { 'cityCode': item.city_code, 'warehouseCode': item.warehouse_code, 'provinceCode': item.province_code, 'cityName': item.cityName, 'ship_add_id': item.ship_add_id, 'name': item.cityName }
      uni.$u.vuex('vuex_cityInfo_shopCar', cityParams);
      uni.$u.vuex('vuex_cityInfo', cityParams);
      uni.$u.vuex('vuex_nowAddress', cityParams);
      // #ifdef H5
      this.$cookie.set('cityCode', item.city_code)
      this.$cookie.set('warehouseCode', item.warehouse_code)
      this.$cookie.set('provinceCode', item.province_code)
      localStorage.setItem('my_select_station', JSON.stringify(cityParams));
      // #endif
      uni.$u.vuex('vuex_cityInfo_shopCarClick', true);
      navigateBackPrePage({ shippingAddressModel: item })
    },
    editAdd(type, id = '') {
      uni.navigateTo({
        url: `/address/addressEdit?type=${type}&id=${id}`
      })
    }
  },
  onLoad(option) {
    this.addressId = option.id
  },
  onShow() {

  },

}
</script>

<style scoped lang="scss">
.addressList {
  background: #F5F5F5;
  box-sizing: border-box;
  padding: 16rpx 32rpx;
  position: relative;
  .deleteAdd {
    padding: 14rpx 32rpx 32rpx 32rpx;
    box-sizing: border-box;
    text-align: right;
    color: #808080;
    font-size: 22rpx;
    font-weight: 400;
    border-top: 1rpx solid #F5F5F5;
  }
  .noList {
    text-align: center;
    color: #999999;
    font-size: 28rpx;
    font-weight: 400;
    padding-top: 170rpx;
    image {
      width: 280rpx;
      height: 208rpx;
      display: block;
      margin: 0 auto;
      margin-bottom: 16rpx;
    }
  }
  .radioDefault {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    border-radius: 50%;
    border: 1rpx solid #D3D3D3;
    margin-right: 16rpx;
  }
  .radioAcitve {
    background: #FF5533;
    border: 1rpx solid #FF5533;
  }
  .footerFaker {
    width: 100%;
    height: 160rpx;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 160rpx;
    background: #FFFFFF;
    padding-top: 16rpx;
    box-sizing: border-box;
    .button {
      width: 624rpx;
      height: 64rpx;
      border-radius: 8rpx;
      background: linear-gradient(128.8deg, rgba(255,121,95,1) 0%, rgba(238,61,26,1) 100%);
      font-size: 28rpx;
      color: #FFFFFF;
      font-weight: 400;
      margin: 0 auto;
      display: flex;
      justify-content: center;
      align-content: center;
      align-items: center;
    }
  }
  .address {
    width: 100%;
    border-radius: 8rpx;
    background: #FFFFFF;
    margin-bottom: 16rpx;
    .address_small {
      display: flex;
      justify-content: space-between;
      align-items: center;
      align-content: center;
      padding: 32rpx 22rpx 32rpx 32rpx;
      box-sizing: border-box;
    }
    .provi {
      color: #222222;
      font-size: 22rpx;
      font-weight: 400;
      display: flex;
      align-items: center;
      align-content: center;
      image {
        width: 56rpx;
        height: 32rpx;
        margin-right: 8rpx;
      }
    }
    .city {
      color: #222222;
      font-size: 28rpx;
      font-weight: 700;
      margin-top: 12rpx;
    }
    .name {
      color: #222222;
      font-size: 22rpx;
      font-weight: 400;
      margin-top: 12rpx;
    }
  }
  .address:first-child {
    margin-top: 0rpx;
  }
}
</style>
